import React, {PureComponent} from "react"
import {CSSTransition} from 'react-transition-group'
import {connect} from 'react-redux'
import {actionCreater} from "./store";
import {actionCreater as loginActionCreater} from '../../login/store/'
import {Link} from 'react-router-dom'
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    SearchWrapper,
    NavSearch,
    HotSearch,
    SearchTitle,
    SearchItem,
    SearchChange,
    Addition,
    Button
} from './style'


class Header extends PureComponent {
    getHotListDisplay() {
        const {focused, list, mouseIn, page, handleChangePage, handleMouseEnter, handleMouseLeave} = this.props
        let newList = list.toJS()
        let tempList = []
        if (newList.length) {
            for (let i = (page - 1) * 10; i < page * 10; i++) {
                if (newList[i]) {
                    tempList.push(newList[i])
                }
            }
        }
        if (focused || mouseIn) {
            return <HotSearch>
                <SearchTitle onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                    热门搜索
                    <SearchChange onClick={() => {
                        handleChangePage(page, this.spinIcon)
                    }}>
                        换一批
                        <i ref={(icon) => {
                            this.spinIcon = icon
                        }} className='iconfont spin'>&#xe851;</i>
                    </SearchChange>
                </SearchTitle>
                {tempList.map((item) => {
                    return <SearchItem key={item}>{item}</SearchItem>
                })}
            </HotSearch>
        } else {
            return null
        }
    }

    render() {
        const {focused, handleFocus, handleBlur, list, loginStatus, logout} = this.props
        return (
            <HeaderWrapper>
                <Link to='/'>
                    <Logo/>
                </Link>
                <Nav>
                    <NavItem className="left active">首页</NavItem>
                    <NavItem className="left">下载APP</NavItem>
                    {loginStatus
                        ?
                        <NavItem className="right cursor" onClick={logout}>退出</NavItem>
                        :
                        <Link to='/login'>
                            <NavItem className="right cursor">登录</NavItem>
                        </Link>
                    }
                    <NavItem className="right">
                        <i className="iconfont">&#xe636;</i>
                    </NavItem>
                    <SearchWrapper>
                        <CSSTransition
                            in={focused}
                            timeout={1000}
                            classNames='focus'
                        >
                            <NavSearch
                                className={focused ? 'focused' : ''}
                                onFocus={() => handleFocus(list)}
                                onBlur={handleBlur}
                            >

                            </NavSearch>
                        </CSSTransition>
                        <i className={focused ? 'iconfont focused zoom' : 'iconfont zoom'}>&#xe60b;</i>
                        {this.getHotListDisplay(focused)}
                    </SearchWrapper>
                </Nav>
                <Addition>
                    <Button className="reg">注册</Button>
                    <Link to='/write'>
                        <Button className="write">
                            <i className='iconfont'>&#xe615;</i>
                            写文章
                        </Button>
                    </Link>
                </Addition>
            </HeaderWrapper>
        )

    }
}

const mapStateToProps = (state) => {
    return {
        focused: state.get('head').get('focused'),
        list: state.get('head').get('list'),
        mouseIn: state.get('head').get('mouseIn'),
        page: state.get('head').get('page'),
        totalPage: state.get('head').get('totalPage'),
        loginStatus: state.getIn(['login', 'loginStatus'])
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        handleFocus(list) {
            if (!list.size) {
                dispatch(actionCreater.getHotList())
            }
            dispatch(actionCreater.getChangeFocusStatusAction(true))
        },
        handleBlur() {
            dispatch(actionCreater.getChangeFocusStatusAction(false))
        },
        handleMouseEnter() {
            dispatch(actionCreater.getMouseEnterAction())
        },
        handleMouseLeave() {
            dispatch(actionCreater.getMouseLeaveAction())
        },
        handleChangePage(page, icon) {

            let oriAngle = icon.style.transform.replace(/[\D]/ig, '')
            if (oriAngle) {
                oriAngle = parseInt(oriAngle)
            } else {
                oriAngle = 0
            }
            icon.style.transform = 'rotate(' + (oriAngle + 360) + 'deg)'

            dispatch(actionCreater.getChangePageAction(page))
        },
        logout() {
            dispatch(loginActionCreater.getChangeLoginStatusAction(false))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header)
